<template>
    <div class="message-wrap" ref="msgWrapper">
        <infinite-loading direction="top" distance="20" @infinite="infiniteHandler">
        </infinite-loading>
        <div class="item-wrap" ref="itemWrap">
            <div v-for="(v) in messArr" :key="v.id">
                <!-- 回复 -->
                <template v-if="v.type == 6">
                    <div class="single-message" >
                        <span class="mess-official">官方</span>
                        <span class="nick-name">{{ v.nick || v.ac }}</span>
                        <span class="mess-reply-name">@{{ JSON.parse(v.content.replace(/\n/g, "\\n").replace(/\r/g,
                            "\\r")).parent.nickName || '-' }}</span>
                        <span>{{ JSON.parse(v.content.replace(/\n/g, "\\n").replace(/\r/g, "\\r")).msg }}</span>
                        <p class="mess-replied">
                            <span>{{ JSON.parse(v.content.replace(/\n/g, "\\n").replace(/\r/g, "\\r")).parent.nickName ||
                                '-'
                            }}:</span>
                            <span>{{ JSON.parse(v.content.replace(/\n/g, "\\n").replace(/\r/g, "\\r")).parent.message
                            }}</span>
                        </p>
                    </div>
                </template>
                <!-- 置顶留言 -->
                <template v-else-if="v.type == 99">
                    <div class="single-message">
                        <img :src="$store.state.SysOrgInfo.icon + '?x-oss-process=image/resize,m_fixed,h_45,w_45'" />
                        <span class="sys-name">{{ $store.state.SysOrgInfo.name }}：</span>
                        <span v-html="v.content"></span>
                    </div>
                </template>
                <template v-else>
                    <div class="single-message">                       
                        <span class="mess-official" v-if="v.ac.includes('zbzlpt') || v.ac == creator">官方</span>
                        <span class="nick-name">{{ v.ac == creator ? '主播' : v.nick || v.ac }} : </span>
                        <span class="mine" v-if="v.ac == $store.state.userInfo.un">我</span>
                        {{ v.content }}
                        <!-- 迎街坊邻里进店选购还有很多新鲜的肉菜水果，欢迎新老顾客前 -->
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>
<script>
import { getBackMessageApi } from '@/util/api.js';
import InfiniteLoading from 'vue-infinite-loading';
export default {
    data() {
        return {
            page: 1,
            videoId: this.$route.params.id,
            messArr: [],
            creator: this.videoInfo.videoInfo.creator,
        }
    },
    components: {
        InfiniteLoading,
    },
    computed: {
        userInfo() {
            return this.$store.state.userInfo
        }
    },
    props: {
        videoInfo: Object
    },
    created() {
    },
    mounted() {
        this.$EventBus.$on("sendMsgPsBack", (inputValue) => {
            const { nickname, un } = this.userInfo;
            const itemMsg = {
                "id": Math.random(),
                "vid": '',
                "ac": un,
                "nick": nickname,
                "content": inputValue,
                "addTime": "",
                "channel": null,
                "avator": "",
                "type": 0,
                "userSource": null,
                "role": null
            }
            this.messArr.push(itemMsg);
            this.$nextTick(() => {
                const contentDom = document.querySelector('.item-wrap').lastChild;
                contentDom.scrollIntoView({ behavior: 'smooth', });
            })
        })        
    },
    methods: {
        async infiniteHandler($state) {
            try {
                const dataMsg = await getBackMessageApi(this.videoId, this.page);
                const { code, data } = dataMsg.data;
                if (code === '000000') {
                    const { items } = data;
                    const { videoInfo: { memo } } = this.videoInfo;
                    if (this.page == 1) {
                        if (memo) {
                            const sigleItme = {
                                type: 99,
                                nick: '',
                                content: memo,
                                id: 99999
                            }
                            this.messArr.push(sigleItme)
                        }
                    }
                    if (items.length) {
                        this.page++;
                        this.messArr = [...items.reverse(), ...this.messArr,];
                        $state.loaded();
                    } else {
                        $state.complete();
                    }
                }
            } catch (error) {

            }

        },
    }
}
</script>

<style lang="less"  scoped>
.message-wrap {
    width: 490px;
    max-height: 360px;
    overflow-y: scroll;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 100%);

    .item-wrap {
        width: 490px;
        max-height: 360px;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    /deep/.infinite-status-prompt {
        display: none;
    }

    .single-message {
        background: rgba(0, 0, 0, 0.30);
        font-size: 26px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 36px;
        padding: 10px 15px;
        border-radius: 20px;
        margin-bottom: 10px;
        width: fit-content;
        word-break: break-all;
        float: left;

        .mine {
            width: 28px;
            height: 28px;
            background: RGBA(0, 163, 246, 1);
            font-size: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 4px;
            margin-right: 8px;
            float: left;
            margin-top: 2px;
        }

        .mess-official {
            width: 50px;
            height: 30px;
            border-radius: 4px;
            background: RGBA(255, 99, 89, 1);
            font-size: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 8px;
            float: left;
            margin-top: 4px;
        }

        .nick-name {
            color: rgba(0, 245, 255, 1);
            color: white;
            margin-right: 8px;
            float: left;
        }

        .mess-replied {
            position: relative;
            width: 100%;
            padding: 4px 10px 4px 30px;
            background: RGBA(0, 0, 0, .3);
            font-size: 26px;
            line-height: 40px;
            color: rgba(204, 204, 204, 1);
            border-radius: 10px;
            margin-top: 10px;

            &:before {
                position: absolute;
                top: 12px;
                bottom: 16px;
                left: 15px;
                width: 4px;
                background: rgba(204, 204, 204, 1);
                content: "";
                border-radius: 2px;
            }
        }

        .mess-reply-name {
            color: rgba(255, 225, 89, 1);
        }

        img {
            width: 40px;
            height: 40px;
            float: left;
            margin-right: 16px;
            border-radius: 50%;
        }

        .sys-name {
            float: left;
            color: rgba(255, 225, 89, 1);
        }
    }
}</style>